<template>
  <div class="tablist">
    <main>
      <!-- <div id="tab1" class="tab_content">
        <goodslist></goodslist>
      </div>
      <div id="tab2" class="tab_content">
        <cart></cart>
      </div>
      <div id="tab3" class="tab_content">
        <goodslistslot></goodslistslot>
      </div>
      <div id="tab4" class="tab_content">测试功能标签页</div> -->
      <div class="tab_content">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, provide, onMounted, computed } from "vue";
import { useStore } from "vuex";
const store=useStore()
//定义显示产品数组列表
const myGoods = [
						{
							id: 1,
							title: '石硖龙眼',
							describe: '约250g，大个',
							price: 13,
							num: 11,
							goodclass: 'small',
							img: '/a1.jpg'
						}, {
							id: 2,
							title: '福建荔枝',
							describe: '约600g',
							price: 42,
							num: 22,
							goodclass: 'small',
							img: '/a2.jpg'
						}, {
							id: 3,
							title: '海南金煌芒果',
							describe: '约680g/3个',
							price: 66,
							num: 31,
							goodclass: 'big',
							img: '/a3.jpg'
						}, {
							id: 4,
							title: '精选水蜜桃',
							describe: '约680g/3个',
							price: 45,
							num: 14,
							goodclass: 'big',
							img: '/a4.jpg'
						},
						{
							id: 5,
							title: '龙树大龙眼',
							describe: '约680g/3个',
							price: 333,
							num: 15,
							goodclass: 'small',
							img: '/a5.jpg'
						}, {
							id: 6,
							title: '广西小台芒',
							describe: '约680g/3个',
							price: 345,
							num: 16,
							goodclass: 'big',
							img: '/a6.jpg'
						},{
							id: 7,
							title: '四川骨脆李子',
							describe: '约680g/3个',
							price: 123,
							num: 14,
							goodclass: 'small',
							img: '/a7.jpg'
						}, {
							id: 8,
							title: '安岳黄柠檬',
							describe: '约680g/3个',
							price: 45,
							num: 15,
							goodclass: 'median',
							img: '/a8.jpg'
						}, 
						{
							id: 9,
							title: '真安岳青柠檬',
							describe: '约680g/3个',
							price: 65,
							num: 16,
							goodclass: 'median',
							img: '/a9.jpg'
						} 
					]
const myGoodsList=computed(()=>store.getters.getMyGoodsList)
const cartList = computed(()=>store.getters.getCarList);
// provide("cartlist", cartList); // 将cartlist定义为依赖,并设置依赖的key为cartlist
// provide("myGoodsList", myGoodsList); //将myGoodsList定义为依赖,设置key为myGoodsList
onMounted(()=>{
	// store.dispatch("setMyGoodsList",myGoods)
})

</script>

<style scoped>
.tablist {
  position: relative;
  /* margin: 50px auto; */
  /* top: 60px; */
  min-height: 200px;
}

.tab_content {
  position: absolute;
  top: 30px;
  width: 100%;
  height: 600px;
  padding: 15px;
  border: 1px solid #91a7b4;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  font-size: 1.2em;
  line-height: 1.5em;
  color: #666;
  background: #fff;
}
/*使用css3(:target属性实现)，z-index控制元素层级*/
#tab1:target,
#tab2:target,
#tab3:target {
  z-index: 1;
}
</style>
